<template>
	<view>
		<view class="nav">
			<view class="total">购买订单总额：{{yj}}</view>
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
						<view class="line" :class="index == select ? 'menucolor02' : ''"></view>
					</view>
				</block>
			</view>
		</view>
		<view class="clear_box05"></view>
		<block v-for="(item, index) in goods" :key="'goods' + index">
			<view
				class="content"
				v-if="select == 0 || (select == 1 && item.order_status == 0) || (select == 2 && item.order_status == 1) || (select == 3 && item.order_status == 3) || (select == 4 && item.order_status == 4) || (select == 5 && (item.order_status == 5 || item.order_status == 6 || item.order_status == 7) )"
			  data-url="/pages/personalcenter/mylist/details" >
				<view class="order_box">
					<view class="number">订单编号：{{ item.order_no}}</view>
					<view class="state" v-if="item.order_status == 0">等待买家付款</view>
					<view class="state" v-if="item.order_status == 1">等待卖家发货</view>
					<view class="state" v-if="item.order_status == 9">线下支付待审核</view>
					<view class="state" v-if="item.order_status == 3">卖家已发货</view>
					<view class="state" v-if="item.order_status == 4">交易完成</view>
					<view class="state" v-if="item.order_status == 5">退款中</view>
					<view class="state" v-if="item.order_status == 6">已退款</view>
					<view class="state" v-if="item.order_status == 7">退款驳回</view>
						<view class="state" v-if="item.order_status == 8">已取消</view>
				</view>
				<view class="state2" v-if="item.tg == 2 && item.order_status >0">
					<span class="s_status" v-if="item.tg_data.status == 1">拼团中</span>
					<span class="s_status" v-if="item.tg_data.status == 2">拼团成功</span>
					<span class="s_status" v-if="item.tg_data.status == -1">拼团失败</span>
				</view>
				<view class="goods_box" v-for="(c, i) in item.data">
					<image class="goods_img" :src="c.image" mode="scaleToFill"></image>
					<view class="goods_msg">
						<view class="title">{{ c.name }}</view>
						<view class="num">x{{ c.quantity }}</view>
						<view class="money" style="    top: 50px;" v-if='item.pay_type==1'>￥{{ c.price }}</view>
						<!--<view class="money" style="    top: 50px;" v-if='item.pay_type==2'>￥{{ c.price }}+{{ c.znj}}%助农劵</view> -->
						<view class="money"style="    top: 50px;" v-if='item.pay_type==2'>积分：{{ c.price}}</view>
						<view class="time" v-if='c.sku_dkr'>规格：{{ c.sku_dkr }}</view>
						<view class="time" v-else>规格：默认</view>
					</view>
				</view>
				
				<view style="border-top: 1px solid #f9f9f9; margin-top: 8px;display: flex;justify-content: flex-end;">
					
					<view class="money" style="    top: 50px;font-size: 4vw;color: #666;" v-if='item.pay_type==1'>实付：<span style="color: #f80000;">￥{{ item.pay_fee }}</span></view>
						<view class="money" style="    top: 50px;font-size: 4vw;color: #666;" v-if='item.pay_type==2'>实付：<span style="color: #f80000;">积分:{{ item.pay_fee }}</span></view>
							<view class="money"style="    top: 50px;font-size: 4vw;color: #666;" v-if='item.pay_type==3'>实付：<span style="color: #f80000;">积分：{{ item.pay_znb}}</span></view>
				</view>
				
				<view class="menu_box">
			<!-- 		<view class="menu menu02" v-if="(item.order_status==1 || item.order_status==3) && item.pay_type==1  " :data-url="'/pages/personal/gift/apply?id='+item.id" @click.stop="gotopage">申请退款</view> -->
					<view class="menu menu02" :data-url="'/pages/mylist/details?id='+item.id" @click="gotopage">查看详情</view>
					<view class="menu" v-if="item.order_status == 0" @click="gotopage1" :data-id="item.id">付款</view>
				<!-- 	<view class="menu" v-if="item.state == 3">提醒发货</view> -->
					<!-- <view class="menu menu02" v-if="item.order_status == 3 " :data-url="'/pages/mylist/logistics?id='+item.id" @click.stop="gotopage">查看物流</view> -->
					<view class="menu" :data-id="item.id" @click="sh"  v-if="item.order_status == 3" >确认收货</view>
					<!-- <view class="menu" v-if="item.state == 2" data-url="/pages/personalcenter/mylist/evaluate" @click.stop="gotopage">评价</view>
					<view class="menu menu02" v-if="item.state == 4" data-url="/pages/personalcenter/mylist/refund" @click.stop="gotopage">退款详情</view> -->
					<!-- <view class="menu" v-if="item.state == 4">删除记录</view>					
					<view class="menu03" v-if="item.state == 4&&item.t == 1">
						<view class="i iconfont">&#xe6de;</view>
						<view class="t">退款成功</view>
					</view>
					<view class="menu03" v-if="item.state == 4&&item.t == 2">
						<view class="i iconfont">&#xe60b;</view>
						<view class="t">换货成功</view>
					</view> -->
					
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			select: 0,
			menu: [
				{
					text: '全部'
				},
				{
					text: '待付款'
				},
				{
					text: '待发货'
				},
				{
					text: '待收货'
				},
				{
					text: '已完成'
				},
				{
					text: '售后单'
				},
				// {
				// 	text: '退款和售后'
				// }
			],
			f:0,
			yj:0,
			goods: []
		};
	},
	onLoad(options) {
		// console.log(options.index);
		let me = this;
		console.log(options.index);
		let index = options.index?options.index:0
		this.select = index;
		me.Net._get('orderList',{},(res)=>{
			if(res.code ==1){
				me.goods=res.data.list
				me.f=res.data.f
					me.yj=res.data.yj
			  console.log(res.data)
			}
		});	
	},
	methods: {
	lord() {
			let me = this;
			me.Net._get('orderList',{},(res)=>{
				if(res.code ==1){
					me.goods=res.data.list
					me.f=res.data.f
				  console.log(res.data)
				}
			});	
			},
		sh(e) {
			var that = this;
			let id = e.currentTarget.dataset.id;
				that.Net._get('qrsh',{order_id:id},(res)=>{
					if(res.code ==1){
						that.Msg.Success('确认成功',(res)=>{
							that.lord();
						})
					}
				});
				
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.select = index;
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		gotopage1(e){
			let url = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: '/pages/car/payment?id='+url,
			});
		},
		onBackPress(e){
		  console.log("监听返回按钮事件",e);
		 uni.reLaunch({
		 	url:'/pages/personal/personal'
		 })
		  // 此处一定姚要return为true，否则页面不会返回到指定路径
		  return true;
		},
		openPhone() {
			uni.showModal({
				title: '客服热线',
				content: '15880123228',
				success: function(res) {
					if (res.confirm) {
						//console.log('用户点击确定');
						uni.makePhoneCall({
							phoneNumber: '15880123228' //仅为示例
						});
					} else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style>
page{
	background-color: #f8f8f8;
}
.clear_box05 {
	height: 80px;
}
.nav {
	width: 100%;
	height: 80px;
	overflow: hidden;
	overflow-x: auto;
	position: fixed;
	background-color: #4d726f;
	z-index: 99;
}
.nav .total{
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: #ffffff;
	font-weight: bold;
	padding: 0 4%;
}
.nav .navauto {
	width:100%;
	height: 50px;
	display: flex;
}

.nav .navauto .menu {
	width: 25%;
	height: 50px;
}

.nav .navauto .menu .text {
	font-size: 16px;
	color: #fff;
	text-align: center;
	margin-top: 10px;
}

.nav .navauto .menu .line {
	width: 23px;
	height: 2.5px;
	background-color: transparent;
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 6px;
}

.menucolor {
	color: #fff !important;
	font-size: 17px !important;
	font-weight: bold;
}

.menucolor02 {
	background-color: #fff !important;
}

.content {
	width: 94%;
	margin: 0 3%;
	background: #fff;
	border-radius: 10px;
	margin-top: 25rpx;
	padding:0 3vw;
	box-sizing: border-box;
	display: inline-block;
}

.content .order_box {
	width: 100%;
	height: 30px;
	position: relative;
}

.content .order_box .number {
	font-size: 15px;
	color: #333;
	position: absolute;
	left: 10px;
	top: 10px;
}

.content .order_box .state {
	font-size: 15px;
	color: #f80000;
	position: absolute;
	right: 10px;
	top: 10px;
}
.content .state2 {
	font-size: 15px;
	width: 100%;
	text-align: left;
	margin-top: 10rpx;
}
.content .state2 .s_status{
	margin-left: 10px;
	padding: 2rpx 15rpx;
	background: #f80000;
	color: #FFFFFF;
	border-radius: 8rpx;
}

.content .goods_box {
	width: 100%;
	position: relative;
	margin-top: 10px;
	display: flex;
}

.content .goods_box .goods_img {
	width: 90px;
	height: 90px;
	border-radius: 6px;
}

.content .goods_box .goods_msg{
	flex: 1;
	box-sizing: border-box;
	padding-left: 25rpx;
	position: relative;
}
.content .goods_box .goods_msg .title {
	font-size: 17px;
	color: #333;
	width: calc(100% - 50px);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.content .goods_box .goods_msg .num {
	font-size: 14px;
	color: #666;
	width: 50px;
	text-align: right;
	position: absolute;
	right: 10px;
	top: 5rpx;
}

.content .goods_box .goods_msg .money {
	font-size: 17px;
	color: #f80000;
	width: 100%;
	padding-top: 30rpx;
}

.content .goods_box .goods_msg .time {
	font-size: 14px;
	color: #959595;
	width: 100%;
	padding-top: 5rpx;
}

.content .menu_box {
	width: 100%;
	padding: 0 0 25rpx;
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.content .menu_box .menu {
	box-sizing: border-box;
	background-color: #f80000;
	margin-top: 10px;
	border-radius: 30px;
	text-align: center;
	font-size: 28rpx;
	color: #fff;
	padding: 10rpx 20rpx;
}
.content .menu_box .menu:not(:first-child){
	margin-left: 10rpx;
}

.content .menu_box .menu02 {
	border: 1px solid #999 !important;
	color: #999 !important;
	background-color: transparent !important;
}

.content .menu_box .menu03 {
	position: absolute;
	left: 10px;
	display: flex;
}

.content .menu_box .menu03 .i {
	font-size: 20px;
	color: #f80000;
	line-height: 50px;
	margin-right: 5px;
}

.content .menu_box .menu03 .t {
	font-size: 12px;
	color: #333;
	line-height: 50px;
}
</style>
